<script setup lang="ts">
import DataAnalysis from "~/contentScripts/views/sycm/market_monitor/popular_artifact/dataAnalysis.vue";
import SYCM from "~/utils/ali/sycm";

const props = defineProps({
  title: {
    type: String,
    default: '店铺'
  },
  data: {
    default: {
      flow: {
        data: [
          {
            "shop": {
              "b2CShop": true,
              "pictureUrl": "//img.alicdn.com/imgextra/c9/09/TB12W6IcwDD8KJjy0FdSuwjvXXa.jpg",
              "isMonitored": false,
              "title": "得力官方旗舰店",
              "shopUrl": "//deli.tmall.com",
              "userId": "RAzN8HWL5FkMkpnE4oAb7SiofUPD1sQbnATSNJFNXxgNWDpnAXK"
            },
            "seIpvUvHits": {"value": 273116},
            "uvIndex": {"value": 338667},
            "cateRankId": {
              "cycleCqc": 0,
              "value": 1
            },
            "tradeIndex": {"value": 1109294.27248364},
            "userId": {"value": "RAzN8HWL5FkMkpnE4oAb7SiofUPD1sQbnATSNJFNXxgNWDpnAXK"}
          }
        ],
        "params": {
          "dateRange": "2023-08-28|2023-09-03",
          "dateType": "week",
          "pageSize": 10,
          "page": 1,
          "order": "desc",
          "orderBy": "uvIndex",
          "dtUpdateTime": false,
          "cateId": 50018004,
          "device": 0,
          "sellerType": -1,
          "styleId": "",
          "priceSeg": "",
          "pageId": "",
          "indexCode": "uvIndex,seIpvUvHits,tradeIndex"
        }
      },
      trade: {
        data: [
          {
            "tradeGrowthRange": {
              "cycleCqc": -0.26666856213310625,
              "value": 0.42208056829873125
            },
            "payRateIndex": {"value": 1605.68294642716},
            "shop": {
              "b2CShop": true,
              "pictureUrl": "//img.alicdn.com/imgextra/c9/09/TB12W6IcwDD8KJjy0FdSuwjvXXa.jpg",
              "isMonitored": false,
              "title": "得力官方旗舰店",
              "shopUrl": "//deli.tmall.com",
              "userId": "RAzN8HWL5FkMkpnE4oAb7SiofUPD1sQbnATSNJFNXxgNWDpnAXK"
            },
            "cateRankId": {
              "cycleCqc": 0,
              "value": 1
            },
            "tradeIndex": {"value": 1109294.27248364},
            "userId": {"value": "RAzN8HWL5FkMkpnE4oAb7SiofUPD1sQbnATSNJFNXxgNWDpnAXK"}
          }
        ],
        "params": {
          "dateRange": "2023-08-28|2023-09-03",
          "dateType": "week",
          "pageSize": 10,
          "page": 1,
          "order": "desc",
          "orderBy": "uvIndex",
          "dtUpdateTime": false,
          "cateId": 50018004,
          "device": 0,
          "sellerType": -1,
          "styleId": "",
          "priceSeg": "",
          "pageId": "",
          "indexCode": "uvIndex,seIpvUvHits,tradeIndex"
        }
      }
    },
  }
})
const dataSource = ref<any[]>([]);
const columns = ref<any[]>([]);
const calcData = () => {
  let cate = document.querySelector("div.ebase-FaCommonFilter-module__top > div.ebase-FaCommonFilter-module__left > div > div > a")?.title;
  // 将data中flow和trade下shop userId一致的进行合并 存入dataSource 如果没有相同的数据直接抛弃
  let data: any[] = [];
  props.data.flow.data.map((item) => {
    let trade = null;
    if (props.title == '店铺') {
      trade = props.data.trade.data.find((t) => t.shop.userId == item.shop.userId);
    } else if (props.title == '商品') {
      trade = props.data.trade.data.find((t) => t.item.itemId == item.item.itemId);
    } else if (props.title == '品牌') {
      trade = props.data.trade.data.find((t) => t.brandModel.brandId == item.brandModel.brandId);
    }
    if (trade) {
      data.push({
        date: props.data.trade.params.dateRange.split('|'),
        ...item,
        ...trade,
        cate: cate,
      });
    }
  });
  SYCM.assignData(data);
  // console.log(data);
  dataSource.value = data;
  let _name = [
    [{
      dataIndex: 'shop.title',
      title: '店铺',
      width: 200,
      fixed: 'left',
      dataType: 'custom',
      slot: 'shop',
    }],
    [{
      dataIndex: 'item.title',
      title: '商品',
      width: 200,
      dataType: 'custom',
      fixed: 'left',
      slot: 'item',
    }, {
      dataIndex: 'shop.title',
      title: '所属店铺',
      width: 200,
      dataType: 'custom',
      slot: 'shop',
    }],
    [{
      dataIndex: 'brandModel.brandName',
      title: '品牌',
      width: 200,
      fixed: 'left',
      dataType: 'custom',
      slot: 'brandModel',
    }],
  ];
  let name = _name[['店铺', '商品', '品牌'].indexOf(props.title)];
  columns.value = [
    {
      dataIndex: 'date',
      title: '日期',
      width: 200,
      dataType: 'customRender',
      fixed: 'left',
      render: (text: any, record: any, index: any) => {
        return `${text[0]}~${text[1]}`
      }
    },
    ...name,
    {
      dataIndex: 'cate',
      title: '类目',
      width: 200,
      tooltip: true,
    },
    {
      dataIndex: 'tradeIndex_tran',
      title: '交易金额',
      width: 100,
      align: 'center',
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        // 每隔三位加逗号
        return text.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      },
      sorter: (a, b) => a.tradeIndex_tran - b.tradeIndex_tran,
    },
    {
      dataIndex: 'tradeGrowthRange.value',
      title: '交易增长幅度',
      width: 120,
      align: 'center',
      dataType: 'customRender',
      sorter: (a, b) => a.tradeGrowthRange.value - b.tradeGrowthRange.value,
      render: (text: any, record: any, index: any) => {
        return `${(text * 100).toFixed(2)}%`
      }
    },
    {
      dataIndex: 'payRateIndex_tran',
      title: '支付转换率',
      width: 100,
      align: 'center',
      sorter: (a, b) => parseFloat(a.payRateIndex_tran) - parseFloat(b.payRateIndex_tran),
    },
    {
      dataIndex: 'uvIndex_tran',
      title: '访客数',
      width: 100,
      align: 'center',
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        // 每隔三位加逗号
        return text.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      },
      sorter: (a, b) => parseFloat(a.uvIndex_tran) - parseFloat(b.uvIndex_tran),
    },
    {
      dataIndex: 'seIpvUvHits_tran',
      title: '搜索人数',
      width: 100,
      align: 'center',
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        // 每隔三位加逗号
        return text.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      },
      sorter: (a, b) => parseFloat(a.seIpvUvHits_tran) - parseFloat(b.seIpvUvHits_tran),
    },
    {
      dataIndex: 'seRate',
      title: '搜索占比',
      width: 100,
      align: 'center',
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        // 每隔三位加逗号
        return text.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      },
      sorter: (a, b) => parseFloat(a.seRate) - parseFloat(b.seRate),
    },
    {
      dataIndex: 'uvAmount',
      title: 'UV价值',
      width: 100,
      align: 'center',
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        // 每隔三位加逗号
        return text.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      },
      sorter: (a, b) => parseFloat(a.uvAmount) - parseFloat(b.uvAmount),
    },
    {
      dataIndex: 'payUserNumber',
      title: '支付买家数',
      width: 100,
      align: 'center',
      dataType: 'customRender',
      render: (text: any, record: any, index: any) => {
        // 每隔三位加逗号
        return text.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      },
      sorter: (a, b) => parseFloat(a.payUserNumber) - parseFloat(b.payUserNumber),
    },
    {
      dataIndex: 'customerUnitPrice',
      title: '客单价',
      width: 100,
      align: 'center',
      sorter: (a, b) => parseFloat(a.customerUnitPrice) - parseFloat(b.customerUnitPrice),
    }
  ];
}
onMounted(() => {
  calcData();
})
watch(() => props.data, (val) => {
  calcData();
}, {deep: true})
</script>

<template>
  <div style="max-height: calc(100vh - 150px);overflow-y: auto;margin-top: -15px;">
    <data-analysis :data-source="dataSource" :title="title"/>
    <a-divider/>
    <base-table :columns="columns" table-name="市场排行-爆款神器" :data-source="dataSource" size="small" :scroll="{
    y:550,
  }"
    >
      <template #shop="row">
        <a-row>
          <a-col>
            <img :src="row.shop.pictureUrl" style="width: 30px;height:30px;"/>
          </a-col>
          <a-col style="padding-left: 10px" flex="1" class="text-ellipsis">
            <a :href="row.shop.shopUrl" style="line-height: 30px;" target="_blank">{{ row.shop.title }}</a>
            <i class="xc-anticon anticon-tm oui-canary-icon oui-canary-icon-tm" v-if="row.shop.b2CShop"
               style="color: #ff4d4f;margin-left: 5px;"
            ></i>
          </a-col>
        </a-row>
      </template>
      <template #item="row">
        <a-row>
          <a-col>
            <img :src="row.item.pictUrl" style="width: 30px;height:30px;"/>
          </a-col>
          <a-col class="text-ellipsis" style="padding-left: 10px" flex="1">
            <a :href="row.item.detailUrl" style="line-height: 30px;" target="_blank">{{ row.item.title }}</a>
          </a-col>
        </a-row>
      </template>
      <template #brandModel="row">
        <a-row>
          <a-col>
            <a-image v-if="typeof row.brandModel.logo!='undefined'"
                     :src="`https://img.alicdn.com/tps/${row.brandModel.logo}_48x48.jpg`" style="width: 30px;"
            />
            <img v-else src="https://img.alicdn.com/tps/TB1P1W_LXXXXXXoXVXXXXXXXXXX-74-74.png" style="width: 30px;"/>
          </a-col>
          <a-col style="padding-left: 10px"  class="text-ellipsis" flex="1">
            {{ row.brandModel.brandName }}
          </a-col>
        </a-row>
      </template>
    </base-table>
  </div>

</template>

<style scoped>
.text-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 40px);
}
</style>
